/*-------------------   外部导入   -------------------------------------------------------------------*/
import type { ColumnsType } from 'antd/es/table';
import {
  useSearchParams,
  NavLink,
  useNavigate,
  useLocation
} from "react-router-dom";
import React from "react";
import { Card, Button, Row, Col, Input, Select, Table, Checkbox } from "antd";
import { useState, useEffect } from "react";
// 导入接口
import {
    getCarPay,  // 获取业主车辆费用缴费接口
    getCarPayUser,  // 获取业主信息
} from "../../../api/admin";
// 引入样式
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import "../../../assets/style/admin.scss";
import { HashRouter } from 'react-router-dom';
// 字体图标
import { PlusOutlined, SearchOutlined, RedoOutlined,CloseOutlined } from "@ant-design/icons";

/*-------------------   外部导入   -------------------------------------------------------------------*/


function payFeeOrder() {
    /*-------------------   定义数据   -------------------------------------------------------------------*/
     // 获取路由信息
     const location:any = useLocation().search;
     const ind: any = location.indexOf("=");
     const feeId = location.slice(ind+1);
    const [costForm, setCostForm] = useState({})
    // 表格是否显示
    const [isShow, setIsShow] = useState(false)
    // 用户信息
    const [userForm, setUserForm] = useState()
    // 表格类型
    interface DataType {
        key: React.Key;
        name: string;
        age: number;
        address: string;
    }
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    // 用户表格信息
    const columns: ColumnsType<DataType> = [
        {
            title: '账户类型',
            dataIndex: 'acctTypeName',
            key: "acctTypeName"
        },
        {
            title: '账户名',
            dataIndex: 'acctName',
            key: "acctName"
        },
        {
            title: '账户金额',
            dataIndex: 'amount',
            key: "amount"
        },
        {
            title: '操作',
            dataIndex: 'partId',
            key: "partId",
            render: (text, record) => (
                <div>
                    <Button icon={<PlusOutlined />} type="primary" size="small" onClick={() => { console.log(record) }}>预存</Button>
                </div>
            )
        },
    ];
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    // 返回上一页
    const goBack = () => {
        window.history.go(-1)
    }
    // 获取车辆缴费信息
    useEffect(() => {
        const obj = {
            communityId: 2023032658120002,
            feeId: feeId,
            page: 1,
            row: 1,
            cycle: 1,
        }
        getCarPay(obj)
        .then(res=>{
            console.log(res.data.data);
            setCostForm({...res.data.data})
            getCarPayUser({
                page: 1,
                row: 20,
                feeId: res.data.data.feeId,
                communityId: res.data.data.communityId
            })
                .then(resUser => {
                    console.log(resUser.data.data);
                    setUserForm(resUser.data.data)
                }
                )
        })
    }, [])
    // 缴费周期-选择事件
    const onChange_left = (value: string) => {
        console.log(`selected ${value}`);
    };
    // 支付方式-选择事件
    const onChange_right = (value: string) => {
        console.log(value);
    }
    // 表格是否显示
    const onChange = (e: CheckboxChangeEvent) => {
        setIsShow(e.target.checked)
        console.log(`checked = ${e.target.checked}`);
    };

    return <div className="payFeeOrder">
        <Card title={"订单费用(" + costForm.payerObjName + ")"} extra={<Button type="primary" onClick={() => { goBack() }}>返回</Button>}>
            <Row gutter={24}>
                <Col span={12} className='left'>
                    <ul>
                        <li>
                            <p className='title'>费用ID：</p>
                            <p>{costForm.configId}</p>
                        </li>
                        <li>
                            <p className='title'>费用名称：</p>
                            <p>{costForm.feeName}</p>
                        </li>
                        <li>
                            <p className='title'>费用类型：</p>
                            <p>{costForm.feeTypeCdName}</p>
                        </li>
                        <li>
                            <p className='title'>计费起始时间：</p>
                            <p>{costForm.startTime}</p>
                        </li>
                        <li>
                            <p className='title'>缴费时间：</p>
                            <p>{costForm.endTime}</p>
                        </li>
                        <li>
                            <p className='title'>缴费周期：</p>
                            <div>
                                <Select
                                    showSearch
                                    placeholder=" 请选择缴费周期 "
                                    optionFilterProp="children"
                                    onChange={onChange_left}
                                    filterOption={(input, option) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    options={[
                                        {
                                            value: '1',
                                            label: '1个月',
                                        },
                                        {
                                            value: '2',
                                            label: '3个月',
                                        },
                                        {
                                            value: '3',
                                            label: '3个月',
                                        },
                                        {
                                            value: '4',
                                            label: '4个月',
                                        },
                                        {
                                            value: '5',
                                            label: '5个月',
                                        },
                                        {
                                            value: '6',
                                            label: '6个月',
                                        },
                                        {
                                            value: 'true',
                                            label: '自定义周期',
                                        },
                                        {
                                            value: '8',
                                            label: '自定义金额',
                                        },
                                        {
                                            value: '9',
                                            label: '自定义结束时间',
                                        }
                                    ]}
                                />
                            </div>
                        </li>
                        <li>
                            <p className='title'>备注：</p>
                            <p>
                                <Input.TextArea />
                            </p>
                        </li>
                    </ul>
                </Col>
                <Col span={12} className='right'>
                    <ul>
                        <li>
                            <p className='title'>面积：</p>
                            <p>{costForm.builtUpArea}</p>
                        </li>
                        <li>
                            <p className='title'>单价：</p>
                            <p>{costForm.squarePrice}</p>
                        </li>
                        <li>
                            <p className='title'>附加费：</p>
                            <p>{costForm.additionalAmount}</p>
                            <p></p>
                        </li>
                        <li>
                            <p className='title'>应收款：</p>
                            <h2 style={{ color: "#ff0000" }}>￥{costForm.feePrice}</h2>
                        </li>
                        <li>
                            <p className='title'>支付方式：</p>
                            <div>
                                <Select
                                    showSearch
                                    placeholder=" 必填,请选择支付方式 "
                                    optionFilterProp="children"
                                    onChange={onChange_right}
                                    filterOption={(input, option) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    options={[
                                        {
                                            value: '1',
                                            label: '现金',
                                        },
                                        {
                                            value: '2',
                                            label: 'POS机刷卡',
                                        },
                                        {
                                            value: '3',
                                            label: '微信二维码',
                                        },
                                        {
                                            value: '4',
                                            label: '支付宝二维码',
                                        },
                                        {
                                            value: '5',
                                            label: '转账',
                                        }
                                    ]}
                                />
                            </div>
                        </li>
                        <li>
                            <p className='title'>实收款：</p>
                            <Input style={{ height: "38px", width: "230px" }} value={costForm.feeTotalPrice} />
                        </li>
                        <li>
                            <p className='title'>应缴金额：</p>
                            <h2 style={{ color: "#ff0000" }}>￥{costForm.feeTotalPrice}</h2>
                        </li>
                        <li>
                            <p className='title'>业主账户：</p>
                            <Checkbox onChange={onChange} checked />
                            <p style={{ marginLeft: "50px" }}>
                                <span>赠送积分:&emsp;</span>
                                <span >{costForm.statusCd}</span>
                            </p>
                        </li>
                        <li>
                            <button style={{ backgroundColor: "#28a745" }}

                            >扫码收费</button>
                            <button style={{ backgroundColor: "#007bff" }}>提交收费</button>
                        </li>
                    </ul>
                </Col>
            </Row>
        </Card>
        <Card
            style={{ marginTop: 16 }}
            title="账户信息"
        >
            <Table
                rowSelection={{
                    type: selectionType
                }}
                columns={columns} dataSource={userForm} />
        </Card>

  </div>;
}

export default payFeeOrder;
